<template lang="">
    <div>

    <el-table :data="addressData" style="width: 100%" v-loading="loading">
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="tel" label="联系方式" width="180" />
    <el-table-column prop="city" label="省" width="180" />
    <el-table-column prop="county" label="市" />
    <el-table-column prop="province" label="县" />
    <el-table-column prop="isDefault" label="IsDdefault" />
    <el-table-column prop="addressDetail" label="地址" />
    <el-table-column prop="userid" label="用户id" />
    <el-table-column prop="addressid" label="地址id" />
  </el-table>
  <el-pagination background layout="prev, pager, next" :total="1000"  @current-change ="changepage"/>
    </div>
</template>

<script setup>
import { computed,onMounted ,ref } from 'vue'
import { getaddressList} from '@/api/address.js'
// import { useRouter } from 'vue-router'
const loading = ref(true)
const tableData = ref([])
const page = ref([])
const addressData = computed(() =>
  tableData.value.filter(
    (data,index) =>
      index<10
  )
)
console.log(addressData);
const getaddress =  onMounted(async () => {
  let res = await getaddressList('/address/list')
  // console.log(res)
  if (res.code == '200') {
    page.value = res.data
    tableData.value = res.data.slice(0,10)
    loading.value = false
  }
})
getaddress()
const changepage = (index) =>{
  tableData.value=page.value.slice((index-1)*10,(index-1)*10+10)
}

</script>
<style lang="scss">
    .el-pagination{
      justify-content: center;
    }
</style>